<template>
  <div :class="reactiveClass" :style="paddingStyle">
    <slot></slot>
  </div>
</template>

<script type='text/babel'>
  var _mergeDefault = function (val = [], defVal) {
    if (val.length < defVal.length) {
      let res = new Array(defVal.length)
      defVal.forEach(function (item, index) {
        if (index < val.length) {
          res[index] = val[index]
        } else {
          res[index] = item
        }
      })
      return res
    } else if (val.length > defVal.length) {
      let res = new Array(4)
      val.forEach(function (item, index) {
        res[index] = item
      })
      return res
    } else {
      return val
    }
  }

  export default {
    props: {
      reactive: {
        type: Array,
        default: function () {
          return [12, 12, 12, 12]
        }
      },
      noPadding: {
        type: Boolean,
        default: false
      },
      reactivePadding: {
        type: Number,
        default: 0
      }
    },
    computed: {
      reactiveClass: function () {
        var self = this
        var vals = _mergeDefault(self.reactive, [12, 12, 12, 12])
        return ['col-lg-' + vals[0], 'col-md-' + vals[1], 'col-sm-' + vals[2], 'col-xs-' + vals[3]]
      },
      paddingStyle: function () {
        var self = this
        var style = {}
        if (self.noPadding) {
          style.paddingLeft = '0px'
          style.paddingRight = '0px'
        } else if (self.reactivePadding > 0) {
          style.paddingLeft = self.reactivePadding + 'px'
          style.paddingRight = self.reactivePadding + 'px'
        }
        return style
      }
    }
  }
</script>
